<template>
    <div>
        <template v-if="imgUrl || baseUrl">
            <div class="uplaod_con " :style="{ backgroundImage:imgUrl }">
                <VanImage :src="imgUrl || baseUrl" alt="" class="img" fit="cover" error-icon="" />
                <div class="top" v-if="!onlyShow" @click="selectImgUpload">
                    <van-icon name="photograph" color="#999" size="60" />
                    <div class="desc">
                        <span>{{desc}}</span>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <van-cell :title="desc" value="点击上传" @click="selectImgUpload" is-link></van-cell>
        </template>
        <action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" close-on-click-action @cancel="show=false" />
    </div>
</template>

<script>

/** 图片上传组件 基础容器
 * 
 * 展示 / 编辑
 * 
 */

import { Image as VanImage } from 'vant';
import { ActionSheet } from 'vant';

export default {
    components: { ActionSheet, VanImage },

    props: {
        onlyShow: {
            type: Boolean,
            default: false,
        },
        noClick: {
            type: Boolean,
            default: false,
        },
        desc: {
            type: String,
            default: "图片描述"
        },
        imgUrl: {
            type: String,
            default: ""
        },
        // 底图背景
        baseUrl: {
            type: String,
            default: "",
        },

        fileType: {
            type: String,
            default: ""
        }
    },

    data() {
        return {
            show: false,
            actions: [{ name: 'MOCK', type: '0' }, { name: '相机', type: '1' }, { name: '相册', type: '2' }],
        }
    },

    methods: {
        // 
        selectImgUpload() {
            if (this.noClick) {
                return;
            }
            this.show = true;
            // this.$emit("update:imgUrl", "http://47.102.206.237/file/demo/banner1.jpg")
        },

        onSelect(item) {
            this.show = false;
            if (item.type == '0') {
                this.$emit("update:imgUrl", "http://47.102.206.237/file/demo/banner1.jpg");
                return;
            }
            this.$bridge.ImagePicker(item.type, this.fileType).then(resp => {
                if (resp.startsWith("{")) {
                    resp = JSON.parse(resp);
                    this.$emit("update:imgUrl", resp.fileUrl);
                    this.$emit("ocrBack", resp);
                } else {
                    this.$emit("update:imgUrl", resp)
                }
            });
        },
    },

    computed: {}
};
</script>

<style lang="scss" scoped>
.uplaod_con {
    margin: auto;
    width: 355px;
    height: 180px;
    background-color: #fafafa;
    background-size: 100% 100%;
    box-shadow: 0px 0px 10px 0px rgba(56, 119, 245, 0.2);
    border-radius: 8px;
    overflow: hidden;
    position: relative;

    .img {
        width: 100%;
        height: 180px;
    }
    .top {
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        .desc {
            margin-top: 10px;
            font-size: 14px;
            background-color: rgba(0, 0, 0, 0.3);
            color: #fff;
            padding: 4px 10px;
            border-radius: 4px;
            text-align: center;
        }
    }
}
</style>